<template>
    <div class = "AudioManager">
        <div class="control">
            <span :class = "isPlay ? 'iconfont icon-zanting' : 'iconfont icon-kaishi'" @click = "changePlayState"></span>
        </div>
        <div class = "progress" :style = "'width: ' + width + 'rpx'">
            <p class = "progress-detail">{{ currentTime }}/03:56</p>
            <p class = "progress-line">
                <span class = "current" :style = "'width: ' + currentWidth + 'rpx'"></span>
                <span class = "duration"></span>
            </p>
        </div>
    </div>
</template>
<script>
import {formatAudioTime} from "../../../utils/formatAudioTime"

export default {
    data(){
        return {
            audioManager: null,
            duration: 298,
            currentWidth: 0,
            currentTime: "0:00",
            isPlay: false
        }
    },
    props: ["width","url"],
    onReady(){
        //初始化音频上下文对象
        this.audioManager = wx.createInnerAudioContext();
        this.audioManager.src = encodeURI(this.url);
        //更新时间进度
        this.audioManager.onTimeUpdate(()=>{
            this.currentWidth = Math.ceil(this.audioManager.currentTime / this.duration * this.width);
            this.currentTime = formatAudioTime(this.audioManager.currentTime);
        })

    },
    methods: {
        //改变播放状态的事件
        changePlayState(){
            if(this.audioManager.paused){
                this.audioManager.play();
                this.isPlay = true;
            }else{
                this.audioManager.pause();
                this.isPlay = false;
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .AudioManager{
        display: flex;
        align-items: center;
        .control{
            font-size: 52rpx;
            color: #FFAA00;
        }
        .progress{
            margin-left: 20rpx;
            // width: 565rpx;
            .progress-detail{
                color: #999;
                font-size: 24rpx;
            }
            .progress-line{
                position: relative;
                margin-top: 10rpx;
                height: 6rpx;
                >span{
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 6rpx;
                    border-radius: 10rpx;
                }
                .current{
                    z-index: 999;
                    background-color:#FA0;
                }
                .duration{
                    width: 100%;
                    background-color: #E5E5E5;
                }
            }
        }
    }
</style>